<template>
	<view class="niceui-flex-column" :style="$theme.pageStyle">
		<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration" :indicator-color="indicatorColor"
			:indicator-active-color="activeColor[current]" :previous-margin="leftRightMargin"
			:next-margin="leftRightMargin" @change="changeItem">
			<swiper-item v-for="x in memberName.length" :key="x">
				<view class="niceui-member-card niceui-flex-column" :class="memberLevel+'-color'">
					<view class="member-info">
						<view class="niceui-flex-column">
							<text class="member-name">{{memberName[current]}}</text>
							<!-- <text class="member-end">会员到期时间：2024.01.12</text> -->
						</view>
						<text class="member-status" :class="'status-'+(current+1)">待提升</text>
					</view>
					<view class="grow-up-info niceui-flex-column">
						<view class="grow-up">
							<text> 需要支付 {{growUp[current]}} 开通 ></text>
						</view>
						<!-- <view class="grow-up-progress" :class="'progress-'+(current+1)"></view> -->
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="niceui-list">
			<view class="niceui-list-title">
				<text>成为平台会员解锁<text class="red-strong">8项</text>功能权益</text>
			</view>
			<view class="niceui-list-content">
				<view class="niceui-content-item" v-for="(nav,index) in quanyi" :key="index">
					<text class="niceui-content-item-icon" :class="memberLevel+'-color'"> {{ nav.icon  }} </text>
					<text class="niceui-content-item-text">{{nav.text}}</text>
					<!-- <text class="niceui-content-item-desc">{{nav.desc}}</text> -->
				</view>
			</view>
		</view>

		<view class="uni-container" style="margin: 15px;">
			<uni-table ref="table" border>
				<uni-tr>
					<uni-th align="center">类型</uni-th>
					<uni-th align="center">比例</uni-th>
				</uni-tr>
				<uni-tr v-if="config.selfbuy === 1">
					<uni-td align="center">自购返佣</uni-td>
					<uni-td align="center">{{buy_self[current]}}%</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center">一级返佣</uni-td>
					<uni-td align="center">{{level1[current]}} %</uni-td>
				</uni-tr>
				<!-- <uni-tr v-if="config.level === 2">
					<uni-td align="center">二级返佣</uni-td>
					<uni-td align="center">{{level2[current]}}%</uni-td>
				</uni-tr> -->
			</uni-table>
		</view>


		<view class="niceui-faq niceui-flex-column">
			<view class="niceui-faq-title">如何成为平台会员</view>
			<view class="niceui-faq-content niceui-flex-column">
				<view class="niceui-faq-content-item" v-for="(nav,index) in open" :key="index">
					<view class="niceui-faq-item-info">
						<view>
							<text class="niceui-faq-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">{{nav.text}}</text>
							<text class="niceui-faq-item-desc">{{nav.desc}}</text>
						</view>
					</view>
					<view class="niceui-faq-open" @click="submit(ids[current])">立即开通</view>
				</view>
			</view>
		</view>

		<view class="niceui-faq niceui-flex-column">
			<view class="niceui-faq-title">介绍</view>
			<view class="niceui-faq-content niceui-flex-column">
				<u-parse :content="content[current]"></u-parse>
			</view>
		</view>
		
		<view style="height: 120px;"></view>

		<view class="b_botton">
			<view class="submit" v-if="buy" @click="submit(ids[current])">
				<text >支付 {{growUp[current]}} 开通</text>
			</view>
			<view class="submit" v-else>
				<text>由于相关规范，iOS功能暂不可用</text>
			</view>
		</view>

		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;display: block;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }"
								@click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="topay">
					<text class="text110">确认支付</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				paypop: false,
				buy: true,
				circular: false,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorColor: '#e9e9e9',
				indicatorActiveColor: 'red',
				leftRightMargin: '50rpx',
				current: 0,
				memberLevel: 'member1',
				activeColor: [],
				growUp: [],
				memberName: [],
				level1: [],
				level2: [],
				buy_self: [],
				ids: [],
				content: [],
				id: '',
				Payinfo: {},
				config: {},
				pay_way: 1,
				selectedIndex: 10,
				payList: uni.getStorageSync('pay'),
				quanyi: [{
						icon: "\u{e611}",
						text: '咨询购买返佣',
						desc: '权益'
					},
					{
						icon: "\u{e612}",
						text: '课程购买返佣',
						desc: '权益'
					},
					{
						icon: "\u{10111}",
						text: '合同购买返佣',
						desc: '权益'
					},
					{
						icon: '\u{e60b}', //原代码：&#xe60a;
						text: '服务购买返佣',
						desc: '权益'
					}
				],
				open: [{
					icon: '\u{e610}', //原代码：&#xe60a;
					text: '付费购买',
					desc: '需要付费购买成为平台会员',
					class: 'icon-color-1'
				}],
				faq: [{
						icon: '\u{10112}', //原代码：&#xe60a;
						text: '购买商品或会员',
						desc: '购买价格对应成长值增长',
						class: 'icon-color-1'
					},
					{
						icon: '\u{e60e}', //原代码：&#xe60a;
						text: '成功邀请新人下首单',
						desc: '每成功邀请一位新人下单均可获得订单成长值',
						class: 'icon-color-4'
					},
					{
						icon: '\u{10114}', //原代码：&#xe60a;
						text: '粉丝赠送',
						desc: '每新增一位关注粉丝得1成长值',
						class: 'icon-color-1'
					},
					{
						icon: '\u{10110}', //原代码：&#xe60a;
						text: '分享商品并成功下单',
						desc: '分享者将获得订单金额10%成长值',
						class: 'icon-color-4'
					},
					{
						icon: '\u{10116}', //原代码：&#xe60a;
						text: '社区发帖',
						desc: '发帖+3成长值、赞+1成长值、关联商品被购买+2成长值和惊喜分佣',
						class: 'icon-color-2'
					},
					{
						icon: '\u{10113}', //原代码：&#xe60a;
						text: '钱包充值',
						desc: '每日成长值+钱包金额*1%，上限+10',
						class: 'icon-color-3'
					}
				]
			}
		},
		onLoad() {
			this.getData()
			if(uni.getStorageSync('miniapp_audit') === 1){
				this.buy = true
				if(uni.getStorageSync('osName') === 'ios'){
					this.buy = false
				}else{
					this.buy = true
				}
			}else{
				this.buy = false
			}
		},
		methods: {
			paypops() {
				this.paypop = true
			},
			closespaypop() {
				this.paypop = false
			},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			openpaypop() {

			},
			// 选择支付方式
			changePayType(item) {
				this.pay_way = item.pay_config_id
			},
			getData() {
				$H.get('index/CityInvest', {

				}, {
					token: true
				}).then(res => {
					this.activeColor = res.data.activeColor
					this.memberName = res.data.memberName
					this.growUp = res.data.growUp
					this.ids = res.data.id
					this.level1 = res.data.level1
					this.level2 = res.data.level2
					this.buy_self = res.data.buy_self
					this.content = res.data.content
					this.config = res.data.config
				})
			},
			changeItem(e) {
				this.current = e.detail.current
				this.memberLevel = "member" + (e.detail.current + 1)
			},
			submit(id) {
				console.log(id)
				if (!id) {
					return uni.showToast({
						icon: "none",
						title: "选择错误请重试"
					})
				}
				this.id = id
				this.paypop = true
			},
			topay() {

				if (this.selectedIndex === 10) {
					return uni.showToast({
						icon: "none",
						title: "请选择支付方式"
					})
				}

				$H.post('order/CreateDistributeOrder', {
					id: this.id,
					pay_way: this.pay_way,
					type: 2,
				}, {
					token: true
				}).then(res => {

					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/distribution/index/index'
								})
							}, 400)
						} else if (res.data.code == 2) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/distribution/index/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

				})

			},


		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_itplyreymu.ttf?t=1702390147146') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color: #5b8cff; //5b8cff 4194fc
	$white-color: #fff;
	$radius: 5rpx;
	$border-color: #efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height: 100rpx;
	$list-margin: 15rpx;

	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.showbottom {
		padding: 20px;
	}

	.btn {
		position: fixed;
		bottom: 0px;
		padding-bottom: 20px;
		width: 100%;
		border-radius: 15px 15px 0px 0px;
		background: #fff;

		.btns {
			margin: 10px;
		}
	}



	.swiper {
		width: 100vw;
		padding: 30rpx 0 0;
		height: 390rpx;
		box-sizing: border-box;
	}

	.niceui-member-card {
		height: calc(100% - 60rpx);
		background-color: #d7dfeb;
		color: #555d6e;
		border-radius: 30rpx;
		padding: 30rpx 35rpx 30rpx 40rpx;
		box-sizing: border-box;
		justify-content: space-between;

		width: calc(100vw - 120rpx);
		margin: 0 auto;
	}

	.member-info {
		justify-content: space-between;
		font-weight: bold;
		font-size: 38rpx;

		.member-end {
			font-size: 22rpx;
		}

		.member-status {
			background-color: #f3f7f7;
			font-weight: bold;
			font-size: 22rpx;
			border-radius: 30rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
			height: 45rpx;
			line-height: 45rpx;
		}

		.status-1 {
			background-color: #f3f7f7;
		}

		.status-2 {
			background-color: #fef6eb;
		}

		.status-3 {
			background-color: #fef6eb;
		}

		.status-4 {
			background-color: #424862;
		}

		.status-5 {
			background-color: #625959;
		}
	}

	.grow-up-info {
		margin-bottom: 10rpx;
	}

	.grow-up {
		justify-content: space-between;
		font-weight: bold;
		font-size: 24rpx;
	}

	.grow-up-progress {
		margin-top: 10rpx;
		width: 100%;
		height: 11rpx;
		background-color: #b8bdc7;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.grow-up-progress::after {
		content: '';
		display: inline-block;
		;
		width: 30%;
		height: 100%;
		background-color: #f7fbfb;
	}

	.progress-1 {
		background-color: #b8bdc7;
	}

	.progress-2 {
		background-color: #e2bd81;
	}

	.progress-3 {
		background-color: #f7cfa6;
	}

	.progress-4 {
		background-color: #232b45;
	}

	.progress-5 {
		background-color: #030303;
	}

	.niceui-list {
		background-color: #FFFFFF;
		margin: 0 auto 0;
		padding-bottom: $list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}

	.niceui-list-title {
		padding: 0rpx 50rpx 30rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		width: 100vw;
		justify-content: flex-start;
	}

	.red-strong {
		color: red;
	}

	.niceui-list-content {
		box-sizing: border-box;
		padding: 25rpx 40rpx 0 40rpx;
		flex-wrap: wrap;

		.niceui-content-item {
			width: 25%;
			box-sizing: border-box;
			padding: 0 0 35rpx 0rpx;
			align-items: center;
			flex-direction: column;

			.niceui-content-item-icon {
				font-size: 50rpx;
				font-weight: bold;
				font-family: texticons;
				border-radius: 50%;
				padding: 15rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
			}

			.niceui-content-item-text {
				color: #666;
				font-size: 24rpx;
				font-weight: 400;
			}

			.niceui-content-item-desc {
				color: #999;
				font-size: 24rpx;
				font-weight: 300;
				margin-top: 0rpx;
			}

		}
	}

	.member1-color {
		background-image: linear-gradient(#dbdfeb, #e3ebf3);
		color: #555d6e;
	}

	.member2-color {
		background-image: linear-gradient(to right, #f3d39a, #f7dfb5);
		color: #a36a09;
	}

	.member3-color {
		background-image: linear-gradient(to right, #ffe3cb, #ffebdc);
		color: #b7734f;
	}

	.member4-color {
		background-image: linear-gradient(#28304a, #4a4e67);
		color: #ffe4de;
	}

	.member5-color {
		background-image: linear-gradient(to right, #0d0b0b, #454546);
		color: #ffe3cf;
	}

	.niceui-faq {
		background-color: #fff;
		margin: 0 auto 40rpx;
		width: calc(100vw - 80rpx);
		box-sizing: border-box;

		flex-direction: column;
		border-radius: 30rpx;
		border: solid 0rpx #eaf7ef;
		box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;

		.niceui-faq-title {
			background-image: linear-gradient(#eaf7ef, #fff);
			padding: 30rpx 40rpx 0rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
		}
	}

	.niceui-faq-content {
		padding: 20rpx 30rpx 10rpx 40rpx;

		.niceui-faq-content-item {
			align-items: center;
			justify-content: space-between;
			margin-top: 15rpx;
			margin-bottom: 30rpx;
		}

		.niceui-faq-item-info {
			align-items: center;
			width: 70%;
		}

		.niceui-faq-item-icon {
			font-size: 50rpx;
			font-weight: bold;
			font-family: texticons;
			border-radius: 20rpx;
			padding: 20rpx;
			color: #fff;
			margin-right: 20rpx;
		}

		.niceui-faq-item-text {
			color: #333;
			font-size: 29rpx;
			font-weight: 400;
		}

		.niceui-faq-item-desc {
			color: #999;
			font-size: 23rpx;
			font-weight: 300;
			margin-top: 5rpx;
		}
	}

	.niceui-faq-open {
		background-color: #10b575;
		color: #fff;
		font-weight: bold;
		font-size: 24rpx;
		border-radius: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
	}

	.icon-color-1 {
		background-image: linear-gradient(#72aefe, #4896ff);
	}

	.icon-color-2 {
		background-image: linear-gradient(#5ff9d7, #39debd);
	}

	.icon-color-3 {
		background-image: linear-gradient(#ffd155, #ffbc04);
	}

	.icon-color-4 {
		background-image: linear-gradient(#ff808b, #ff6872);
	}


	.b_botton {
		bottom: 0px;
		z-index: 10;
		position: fixed;
		display: flex;
		height: 80px;
		width: 100%;
		// padding-bottom: 20px;
		background: #FFFFFF;
		box-shadow: 0px 5px 51px 0px rgb(0 102 188 / 48%);
		border-radius: 8px 8px 0px 0px;
	}

	.submit {
		width: 80%;
		height: 50px;
		margin-top: 10px;
		margin-left: 10%;
		background: var(--color-primary);
		border-radius: 30px;
		text-align: center;
		display: block;
	}

	.submit text {
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 500;
		line-height: 50px;
	}


	.pay-type-list {
		display: block;
		margin-bottom: 10px;

		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}

		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;

			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}

		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}

	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
</style>